<template>
  <div class="shade">
    <!-- 过渡生命周期,在过渡期间,需要过渡的盒子内的内容会混乱,用户体验并不好,所以需要在过渡时把他隐藏掉
     -->
    <transition appear @before-enter="content = false" @after-enter="content = true">
      <div class="login-box">
        <p class="title">
          <span v-if="content">登录/注册</span>
          <span v-if="content" class="close" @click="close">×</span>
        </p>
        <label v-if="content" for="name">
          <p>用户名</p>
          <input v-model="name" type="text" id="name" name="" placeholder="请输入2-5个字符">
          <span v-if="!nameReg">×</span>
        </label>

        <label v-if="content" for="password">
          <p>密码</p>
          <input id="password" v-model="password" type="password" name="" placeholder="请输入2-10个字符">
          <span v-if="!passwordReg">×</span>
        </label>

        <div class="btn" v-if="content">
          <button @click="login">登录</button>
          <button @click="register">注册</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "ChatLogin",
  data() {
    return {
      name: "",
      password: "",
      nameReg: true,
      passwordReg: true,
      // 登录盒子内显示的内容
      content: false
    }
  },
  props: ["value"],
  methods: {
    async login() {
      const { name, password } = this
      if (!this.nameReg || !this.passwordReg || !this.name.length || !this.password.length) {
        return alert("输入不合法")
      }
      const { data: res } = await this.$axios.post("/user/login", { name, password })
      if (res.code !== 1) {
        return alert("用户名或密码错误")
      }
      // 注册成功,user保存在本地
      localStorage.setItem("user", this.name)
      alert("登录成功")
      this.close()
    },

    async register() {
      const { name, password } = this
      if (!this.nameReg || !this.passwordReg || !this.name.length || !this.password.length) {
        return alert("输入不合法")
      }
      const { data: res } = await this.$axios.post("/user/register", { name, password })
      if (res.code === -1) {
        return alert("用户名已存在")
      }
      if (res.code !== 1) {
        return alert("注册失败")
      }
      // 注册成功,user保存在本地
      localStorage.setItem("user", this.name)
      alert("注册成功")
      this.close()
    },

    close() {
      this.$emit("input", false)
    },

    beforeEnter(){
      this.content = false
    }
  },
  // 验证的红叉,因为验证的红叉在最开始就显现用户体验并不是很好，所以一开始不能让红叉显现，这样计算属性做就不合适了，最好使用监听器,而且
  // computed: {
  //   nameReg(){
  //     return /^.{2,5}$/.test(this.name)
  //   },
  //   passwordReg(){
  //     return /^.{2,10}$/.test(this.password)
  //   }
  // }
  watch: {
    name: {
      handler() {
        clearTimeout(this.timer1)
        this.timer1 = setTimeout(() => {
          this.nameReg = /^.{2,5}$/.test(this.name)
        }, 500)
      }
    },
    password: {
      handler() {
        clearTimeout(this.timer2)
        this.timer2 = setTimeout(() => {
          this.passwordReg = /^.{2,10}$/.test(this.password)
        }, 500)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
$color: #4FC08D;

.shade {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #00000070;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-box {
    background-color: #fff;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;

    .title {
      $height: 40px;
      height: $height;
      line-height: $height;
      min-width: 250px;
      font-size: 14px;
      text-align: center;
      background-color: $color;
      color: #fff;
      margin-bottom: 10px;
      position: relative;

      .close {
        font-size: 20px;
        position: absolute;
        right: 20px;
        cursor: pointer;
        user-select: none;
      }
    }

    label {
      display: flex;
      align-items: center;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;

      p {
        font-weight: bold;
        width: 50px;
      }

      input {
        border: 1px solid #ccc;
        height: 20px;
        border-radius: 20px;
        text-indent: 12px;
      }

      span {
        font-weight: bold;
        margin-left: 5px;
        font-size: 14px;
        color: red;
      }
    }

    .btn {
      display: flex;
      padding: 10px 50px;
      box-sizing: border-box;
      justify-content: space-between;

      button {
        width: 50px;
        height: 25px;
        border-radius: 10px;
        background-color: $color;
        color: #fff;

        &:hover {
          background-color: #388b66;
        }
      }
    }
  }
}


// 动画
.v-enter,
.v-leave-to {
  width: 0 !important;
  height: 0 !important;
}

.v-enter-to,
.v-leave {
  width: 250px !important;
  height: 200px !important;
}

.v-enter-active,
.v-leave-active {
  transition: all .5s;
}
</style>